{% extends "base.html" %}
{% block title %}OPC UA{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}

{% block navlist %}
<a class="btn btn-dark" href="setting">Back to Setting</a>
{% endblock navlist %}

{% block content %}
<div class="container-fluid">
    <div class="jumbotron jumbotron-fluid" style="background-color: rgba(231, 231, 233, 0.746);padding:20px">
        <div class="row">
            <div class="col-md-5" style="text-align: justify;">
                <img class="img-fluid" src="static/opcua.png" alt="Opcua" />
            </div>
            <div class="col-md-6">
                <strong>
                    基于Python-OPC UA构建Server
                </strong>
            </div>
        </div>
    </div>
</div>

<div id="alerts-wrapper" class="">
    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
    {% for category, message in messages %}
    <div id="alert-message" class="alert alert-{{ category }}">
        {{ message }}
    </div>
    {% endfor %}
    {% endif %}
    {% endwith %}
</div>

<div class="container-fluid">
    <h4>OPC UA Server配置</h4>
    <!-- Edit Server Modal -->
<div class="modal fade" id="edit-server-modal" style="margin: 10px;" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="edit_projects_form" class="d-block mb-3 form-inline" method="post" action="" autocomplete=false>
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">OPC UA Server配置</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    {{ form.hidden_tag() }}
                    <div class="form-row">
                        {{ form.server_name.label( class="form-control-label" ) }}
                        {{ form.server_name( class="form-control", value="" ) }}
                    </div>
                    <div class="form-row">
                        {{ form.endpoint_url.label( class="form-control-label" ) }}
                        <div class="input-goup">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="inputGroupPrepend">ocp.tcp://</span>
                                {{ form.endpoint_url(class="form-control", value="") }}
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        {{ form.namespace.label( class="form-control-label" ) }}
                        {{ form.namespace( class="form-control",value="" ) }}
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </form>
        </div>
    </div>
</div>
</div>

<!-- Start Server Modal -->
<div class="modal fade config-server-modal" style="margin: 10px;" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <form method="POST" id="config-server-form" class="mx-3 mt-2 mb-3">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalCenterTitle">Config Server</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <!--Modal Title-->
                <div class="modal-body">
                    <div id="msgs"></div>
                    <input type="hidden" id="start_server_csrf" />
                    <input type="hidden" name="serverID" />
                    <div class="form-group">
                        <label for="input-ip">PLC Address</label>
                        <input type="text" id="input-ip" class="form-control" name="plc_ip"
                            placeholder="default: 192.168.0.1">
                    </div>
                </div>
                <div class="modal-footer">
                    <a data-server-id="" class="btn btn-sm btn-primary start-server" href="#"><i
                            data-feather="play-circle"></i></a>
                    <a data-server-id="" class="btn btn-sm btn-danger stop-server" href="#"> <i
                            data-feather="stop-circle"></i> </a>

                    <!-- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button> -->
            </form>
        </div>
    </div>
</div>
</div>

<form id="projects_form" style="margin: 10px;" class="d-block mb-3" method="post" action="{{url_for('opcua_.create_server')}}"
    autocomplete=false>
    {{ form.hidden_tag() }}
    <div class="form-row">
        <div class="col-4 mb-3">
            {{ form.server_name.label( class="form-control-label" ) }}
            {{ form.server_name( class="form-control", value="" ) }}
        </div>

        <div class="col-4 mb-3">
            {{ form.endpoint_url.label( class="form-control-label" ) }}
            <div class="input-goup">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="inputGroupPrepend">ocp.tcp://</span>
                    {{ form.endpoint_url(class="form-control", value="") }}
                </div>
            </div>
        </div>

        <div class="col-4 mb-3">
            {{ form.namespace.label( class="form-control-label" ) }}
            {{ form.namespace( class="form-control",value="" ) }}
        </div>
    </div>

    <div class="form-row">
        {{ form.submit( class="form-control btn btn-outline-info col-6 offset-3" ) }}
    </div>
</form>
<table class="table">
    <thead>
        <tr class="row">
            <th scope="col" class="col-sm-1">#</th>
            <th scope="col" class="col-sm-2">Server Name</th>
            <th scope="col" class="col-sm-2 ">Endpont Url</th>
            <th scope="col" class="col-sm-3 ">Namespace</th>
            <th scope="col" class="col-sm-3">Action</th>
        </tr>
    </thead>
    <tbody>
        {% if servers %}
        {% for server in servers %}
        <tr class="row">
            <th scope="row" class="col-sm-1">{{ server.id }}</th>
            <td class="col-sm-2">{{ server.server_name }}</td>
            <td class="col-sm-2">{{ server.server_endpoint_url }}</td>
            <td class="col-sm-3">{{ server.server_namespace }}</td>
            <td class="col-sm-3">
                <p>
                    <a data-serverid="{{ server.id }}" data-name="{{ server.server_name }}"
                        data-epurl="{{ server.server_endpoint_url }}" data-namespace="{{ server.server_namespace }}"
                        href="#" class="btn btn-success btn-sm edit-server-btn"> <i data-feather="edit-2"></i> </a>
                    <a class="btn btn-sm btn-secondary"
                        href="{{ url_for('opcua_.server_populate',serverid=server.id) }}"><i data-feather="edit"></i>
                    </a>
                    <a data-server-id="{{ server.id }}" data-toggle="modal" data-target=".config-server-modal"
                        class="btn btn-sm btn-info config-server" href="#"> <i data-feather="settings"></i> </a>
                    <a data-server="{{ server.id }}" role="button" class="btn btn-sm btn-warning delete-server"
                        href="#"><i data-feather="trash"></i></a>
                </p>
            </td>
        </tr>
        <form method="post" id="del-server-form-{{ server.id }}" class="d-none"
            action="{{ url_for('opcua_.delete_server',serverid=server.id) }}">
            <!-- <input type="hidden" name="csrf_token" value="f1d9d48ec0e26e2a250839fa36ea2c602cc4f85ccfeb5c65"/>
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
              <input type="hidden" name="server_id" value="{{ server.id }}"> -->
        </form>
        {% endfor %}
        {% else %}
        <tr>
            <td class="text-center h3 text-muted"> <strong> No Servers Defined </strong></td>
        </tr>
        {% endif %}
    </tbody>
</table>
{% endblock %}

<!-- {% block javascripts %}-->
<!-- {{ super() }}
    <script>
        $('.delete-server').on('click',function(e){
            e.preventDefault()
            let serverid = $(this).attr('data-server');
            $('#del-server-form-'+serverid).trigger('submit') 
        });
        let csrf_token = "{{ csrf_token() }}"
        $.ajaxSetup({
            beforeSend: function(xhr, settings) {
                if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", csrf_token);
                }
            }
        });
       
    </script> -->
<!-- {% endblock %} -->